<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      height: 200px;
      width: 200px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div id="box">

  </div>
  <script>
    // 防抖
    function debounce(fn, delay = 300) {
      let timer;
      // console.log(1);
      // console.log(timer, "1");
      return () => {
        // console.log(arguments,"arguments");
        const args = arguments;
        // console.log(timer, "timer");
        if (timer) {
          clearTimeout(timer);
          
        }
        // console.log(timer, "clear");
        timer = setTimeout(() => {
          // fn.apply(this,fn)
          // console.log(args,"args");
         
          // console.log( fn.apply(this, args));
          fn.apply(this, args);
        }, delay);
      }

    }
    const oBox = document.getElementById("box");
    oBox.addEventListener(
      "click",
      debounce(() => {
        console.log(111);
      }, 1000)
    );

  </script>
</body>

</html>